<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="context-path" th:content="@{/}"/>
    <title>管理控制台 | Wetech Admin</title>
    <!-- favicon icon -->
    <link rel="icon" type="image/png" th:href="@{/static/img/favicon.ico}">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/static/css/ionicons.min.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/static/css/select2.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/static/css/AdminLTE.min.css}">
    <!-- Pace style -->
    <link rel="stylesheet" th:href="@{/static/css/pace.min.css}">
    <!-- zTree style -->
    <link rel="stylesheet" th:href="@{/static/css/ztree/metroStyle/metroStyle.css}">
    <!-- Bootstrap-table -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-table.min.css}">
    <!--boostrap-fileinput-->
    <link rel="stylesheet" th:href="@{/static/css/fileinput.min.css}">
    <!-- Animate -->
    <link rel="stylesheet" th:href="@{/static/css/animate.min.css}">
    <!-- daterange picker -->
    <link rel="stylesheet" th:href="@{/static/css/daterangepicker.css}">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-datepicker.min.css}">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-colorpicker.min.css}">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-timepicker.min.css}">
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/static/css/iCheck/square/blue.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/static/css/skins/_all-skins.min.css}">

    <!-- 自定义样式 -->
    <link rel="stylesheet" th:href="@{/static/css/admin.css}">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js}"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
    <![endif]-->
    <script th:inline="javascript">
        var CONTEXT_PATH = [[${#request.getContextPath()}]];
    </script>
    <!-- Google Font -->
    <!--<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<!-- Site wrapper -->
<div class="wrapper">
    <!--头部导航-->
    <!--<div th:replace="~{base/header :: header}"> </div>-->
    <!--左边导航-->
    <!--<div th:replace="~{base/main-sidebar :: main-sidebar}"> </div>-->
    <!-- Content Wrapper. Contains page content -->
    <!--<div class="content-wrapper" id="content-wrapper">
        <div th:replace="~{base/content-wrapper :: content-wrapper}"> </div>
    </div>-->
    <div class="content-wrapper" id="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        文件上传页面
        <small>文件上传管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">文件上传管理</a></li>
        <li class="active">文件上传管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <div class="btn-group btn-group-sm">
                            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                            <button  type="button" id="addBtn" class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#addModal"><i class="glyphicon glyphicon-plus"></i> 新增
                            </button>
                            <!-- Indicates caution should be taken with this action -->
                            <button  type="button" id="editBtn" class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#editModal"
                                    data-action="{type:'editable',form:'#editForm',table:'#table',after:'editAfter'}"
                                    disabled><i class="glyphicon glyphicon-edit"></i> 修改
                            </button>
                            <!-- Indicates a dangerous or potentially negative action -->
                            <button type="button" id="deleteBtn" class="btn btn-default" data-toggle="modal"
                                    data-target="#deleteModal"
                                    data-action="{type:'delete',form:'#deleteForm',idField:'id',table:'#table'}"
                                    disabled><i class="glyphicon glyphicon-remove"></i> 删除
                            </button>
                        </div>
                    </div>
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<!-- add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">上传页面</h4>
            </div>
            <div class="modal-body">
                <form id="addForm" method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="uploadjson" name="uploadjson">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="uploadfile"><span
                                class="asterisk">*</span>上传文件:</label>
                        <div class="col-sm-10 controls">
                            <input type="file" multiple="multiple" id="uploadfile" name="uploadfile" data-show-caption="true" />
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#addForm',url:'@{/fileserver/create}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

 <div id="actionButtons" class="admin-hide">
        <a class="like" href="javascript:void(0)" data-toggle="tooltip" title="Like"><i class="glyphicon glyphicon-heart"></i></a>　
        <a  class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　
        <a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-remove"></i></a>　
    </div>
    </div>
</div>

        <!-- ./wrapper -->
        <!-- jQuery 3 -->
        <script th:src="@{/static/js/jquery.min.js}"></script>
        <!-- Bootstrap 3.3.7 -->
        <script th:src="@{/static/js/bootstrap.min.js}"></script>
        <!-- SlimScroll -->
        <script th:src="@{/static/js/jquery.slimscroll.min.js}"></script>
        <!-- FastClick -->
        <script th:src="@{/static/js/fastclick.js}"></script>
        <!-- AdminLTE App -->
        <script th:src="@{/static/js/adminlte.min.js}"></script>
        <!-- Select2 -->
        <script th:src="@{/static/js/select2.full.min.js}"></script>
        <!-- InputMask -->
        <script th:src="@{/static/js/jquery.inputmask.js}"></script>
        <script th:src="@{/static/js/jquery.inputmask.date.extensions.js}"></script>
        <script th:src="@{/static/js/jquery.inputmask.extensions.js}"></script>
        <!-- date-range-picker -->
        <script th:src="@{/static/js/moment.min.js}"></script>
        <script th:src="@{/static/js/daterangepicker.js}"></script>
        <!-- bootstrap datepicker -->
        <script th:src="@{/static/js/bootstrap-datepicker.min.js}"></script>
        <!-- bootstrap color picker -->
        <script th:src="@{/static/js/bootstrap-colorpicker.min.js}"></script>
        <!-- bootstrap time picker -->
        <script th:src="@{/static/js/bootstrap-timepicker.min.js}"></script>
        <!-- SlimScroll -->
        <script th:src="@{/static/js/jquery.slimscroll.min.js}"></script>
        <!-- FastClick -->
        <script th:src="@{/static/js/fastclick.js}"></script>
        <!-- PACE -->
        <script th:src="@{/static/js/pace.min.js}"></script>
        <!-- zTree script -->
        <script th:src="@{/static/js/jquery.ztree.all.min.js}"></script>
        <!-- Bootstrap-table -->
        <script th:src="@{/static/js/bootstrap-table.min.js}"></script>
        <script th:src="@{/static/js/bootstrap-table-zh-CN.min.js}"></script>
        <!--bootstrap fileinput-->
        <script th:src="@{/static/js/fileinput.js}"></script>
        <script th:src="@{/static/js/locales/zh.js}"></script>
        <!-- Bootstrap-typeaheead -->
        <script th:src="@{/static/js/bootstrap3-typeahead.min.js}"></script>
        <!-- Bootstrap-notify-3.1.3 -->
        <script th:src="@{/static/js/bootstrap-notify.min.js}"></script>
        <!-- Bootstrap-validator-0.11.9 -->
        <script th:src="@{/static/js/validator.min.js}"></script>
        <!-- iCheck -->
        <script th:src="@{/static/js/icheck.min.js}"></script>
        <!-- AdminLTE for demo purposes -->
        <script th:src="@{/static/js/demo.js}"></script>

        <script th:inline="javascript" th:src="@{/static/js/admin.js}"></script>
        <script th:src="@{/static/js/common/utils.js}"></script>

<script th:inline="javascript">
    var $table = $('#table');

    $(function () {
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/fileserver/list',
            idField: 'id',
            columns: [
                {field: 'state', checkbox: true},
                {field: 'id', title: '编号', sortable: true, halign: 'left'},
                {field: 'username', title: '用户', sortable: true, halign: 'left'},
                {field: 'ip', title: '上传地址', sortable: true, halign: 'left'},
                {field: 'sourceName', title: '源文件', sortable: true, halign: 'left'},
                {field: 'fileType', title: '文件类型', sortable: true, halign: 'left'},
                {field: 'fileSize', title: '文件大小', sortable: true, halign: 'left'},
                {field: 'tagPathFile', title: '存储路径', sortable: true, halign: 'left'},
                {
                    field: 'action',
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
     <!--上传组件初始化-->
        initFileInput("uploadfile");
    });

    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    function editAfter(obj, row) {
        <!--一个用户有几个角色，几个组-->
        var roleIdList = row.roleIdList;
        var groupIdList = row.groupIdList;
        for (i in roleIdList) {
            var roleId = roleIdList[i];
            $('#editForm').find('[name=roleIds]').find('option[value=' + roleId + ']').prop('selected', true);
        }
        for(i in groupIdList) {
            var groupId = groupIdList[i];
            $('#editForm').find('[name=groupIds]').find('option[value=' + groupId + ']').prop('selected', true);
        }
    }

    function actionFormatter(value, row, index) {
        return $('#actionButtons').html();
    }

    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .edit': function (e, value, row, index) {
            $('#editModal').modal('show')
            $('#editForm').fillForm(row);
            editAfter('', row);
            console.log(value, row, index);
        },
        'click .remove': function (e, value, row, index) {
            $('#deleteModal').modal('show');
            $('.records').html('1');
            var html = '';
            for (var key in row) {
                html += '<input type="hidden" name="' + key + '" value="' + row[key] + '">';
            }
            $('#deleteForm').html(html);
        }
    };

    var setting = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };
    var orgList = [[${organizationList}]];
    var zNodes = [];
    for (var i in orgList) {
        zNodes.push({id: orgList[i].id, pId: orgList[i].parentId, name: orgList[i].name});
    }

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
            nodes = zTree.getSelectedNodes(),
            id = "",
            name = "";
        nodes.sort(function compare(a, b) {
            return a.id - b.id;
        });
        for (var i = 0, l = nodes.length; i < l; i++) {
            id += nodes[i].id + ",";
            name += nodes[i].name + ",";
        }
        if (id.length > 0) id = id.substring(0, id.length - 1);
        if (name.length > 0) name = name.substring(0, name.length - 1);
        $("#organizationId").val(id);
        $("#organizationName").val(name);
        $("#editOrganizationId").val(id);
        $("#editOrganizationName").val(name);
        hideMenu();
    }

    function showMenu() {
        var cityObj = $("#organizationName");
        var cityOffset = $("#organizationName").offset();
        $("#menuContent").css({
            left: cityOffset.left + "px",
            top: cityOffset.top + cityObj.outerHeight()
        }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }

    function showMenuOfEdit() {
        var cityObj = $("#editOrganizationName");
        var cityOffset = $("#editOrganizationName").offset();
        $("#menuContent").css({
            left: cityOffset.left + "px",
            top: cityOffset.top + cityObj.outerHeight()
        }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id == "organizationName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    function initFileInput(ctrlName) {
        var uploadfilemap = {};
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: CONTEXT_PATH + '/fileserver/upload', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            maxFileCount: 4, //允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            uploadExtraData: function (previewId, index) {
                //传参
                var data = {
                    "previewId": previewId,      //此处自定义传参
                    "inputId": ctrlName,//上传input的id
                    "destDir": '/user/excel'
                };
                return data;
            }

        }).on('filepreupload', function (event, data, previewId, index) {     //上传中
            console.log('文件正在上传:');
        }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            //将上传文件的返回数据存放在map中
            //uploadfilemap[previewId] = response.data;
            uploadfilemap[response.data.previewId] = response.data;
            console.log("上传图片后json=：" + JSON.stringify(uploadfilemap));
            // console.log("上传图片id："+index+","+"previewId="+previewId+","+response);//打印出返回的json
            //console.log(response.code);//返回状态
        }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！' + data.status);
        }).on('filesuccessremove', function (event, data, previewId, index) {
            $.each(uploadfilemap, function (_key) {
                var key = _key;
                var value = uploadfilemap[_key];
                if (_key == data) {  //删除
                    delete uploadfilemap[_key];
                }
            });
            console.log("删除图片后的json：" + JSON.stringify(uploadfilemap));
            //console.log('Uploaded thumbnail successfully removed,id='+index+"data="+data);

        });
        $("#uploadjson").val(JSON.stringify(uploadfilemap));
    }
    $.fn.zTree.init($("#tree"), setting, zNodes);
    $("#organizationName").click(showMenu);
    $("#editOrganizationName").click(showMenuOfEdit);
</script>
</body>
</html>